<script lang="ts">
import type { TColumn } from '~comp/table';
import type { TPresetBreakpoints } from '~/composables/useElementBreakpoint';
// import { valueOfRangePickerProps } from '~comp/antd-assist';
import { GameSelect } from '~/components-business/game';
import { RangeMonth } from '~/components-business/range';
import { CurrencySelect } from '~/components/currency';

function useTableList(bp: Ref<TPresetBreakpoints>) {
  const [listQry, listParams] = useFilterPaginationQuery(apis.apiGameLogList, {
    type_alias: { value: undefined, responsive: true },
    game_code: { value: undefined, responsive: true },
    currency: { value: undefined, responsive: true },
    // start_time: {
    //   value: dayjs().startOf('month').valueOf(),
    //   responsive: true,
    // },
    // end_time: {
    //   value: dayjs().endOf('month').valueOf(),
    //   responsive: true,
    // },
    start_time: {
      value: dayjs().startOf('month').utc(true).valueOf(),
      responsive: true,
    },
    end_time: {
      value: dayjs().endOf('month').utc(true).valueOf(),
      responsive: false,
    },
    page_size: { value: 15, responsive: true },
  });
  const listData = computed(() => listQry?.data?.value?.list ?? []);

  const tableBp = computed(() => ({
    s1: bp.value.ltxl, // 手机
    s2: bp.value.xl && bp.value.lt2xl, // 平板
    s3: bp.value['2xl'], // PC
  }));
  const tableColumns = computed(() => {
    const bp = tableBp.value;
    const columns: TColumn[] = [
      { key: 'game', name: $t('zQfkOQfqezj1l2vBna94o'), show: bp.s3 },
      { key: 'time', name: '' },
      { key: 'amount', name: $t('plHorg6dj8ZgRdr4b24gt'), show: bp.s2 || bp.s3 },
      { key: 'multiplier', name: $t('gaNlzHcdnlP1pk6diOFjB'), show: bp.s2 || bp.s3 },
      { key: 'profit', name: $t('iygk8Ly05wCeUYc1LrlRp'), thClass: 'text-right', tdClass: 'text-right' },
    ];

    return columns;
  });

  return {
    listData,
    listParams,
    listQry,
    tableColumns,
    tableBp,
  };
}
</script>

<script setup lang="ts">
const [setEle, eleBp] = useElementBreakpoint({});
const { listQry, listParams, listData, tableColumns, tableBp } = useTableList(eleBp);
const displayUtc = ref(true);
</script>

<template>
  <div>
    <TCard :ref="setEle">
      <template #header>
        <div v-if="eleBp['3xl']" class="text-lg font-semibold">
          {{ $t('kfLf2UpxIwUmxxrEf2Xg2') }}
        </div>

        <!-- 筛选 -->
        <div class="gap-2 text-center" :class="{ 'flex ml-auto': eleBp['3xl'], 'grid grid-cols-2 w-full': eleBp.lt3xl }">
          <CurrencySelect
            v-model:value="listParams.currency"
            class="antd-cover__Select-3d-gray" :class="{ 'ml-auto w-40': eleBp['3xl'] }"
            size="small" labelAlign="center" allowClear :bordered="false" :placeholder="$t('uIkputJyPtyBCeeSwh2ig')"
          />
          <!-- <ARangePicker
            v-bind="valueOfRangePickerProps(listParams)"
            class="ant-cover__RangePicker-3d-gray" :class="{ 'w-40': eleBp['3xl'] }"
            inputReadOnly :bordered="false" format="MM-DD"
          /> -->
          <RangeMonth
            v-model:startTime="listParams.start_time"
            v-model:endTime="listParams.end_time" :bordered="false"
            size="small" :virtual="false" :class="{ 'w-40': eleBp['3xl'] }"
          />

          <GameSelect
            v-model:gameType="listParams.type_alias" v-model:game="listParams.game_code"
            :class="{ 'w-40': eleBp['3xl'] }"
          />
        </div>
      </template>

      <!-- 列表 -->
      <TSuspenseView v-bind="buildSvPropsOfQuery(listQry)" nonSuccessClass="min-h-40">
        <TTable
          :data="listData" :columns="tableColumns" indexId="order_no" rowClass="cursor-pointer"
          @clickRow="globalPopups.gameRecordDetail.open({ gameCode: $event.game.code, orderNo: $event.order_no });"
        >
          <template #time-th>
            <TDateFormatTh v-model:utc="displayUtc" />
          </template>

          <!-- 游戏 -->
          <template #game-td="{ row }">
            {{ row.game.name }}
          </template>
          <!-- 时间 -->
          <template #time-td="{ row }">
            <template v-if="tableBp.s3">
              {{ $d(row.create_time, displayUtc ? "full-utc" : 'full') }}
            </template>
            <template v-else>
              <div class="mb-1">
                {{ row.game?.name }}
              </div>
              <div class="text-sys-text-body">
                {{ $d(row.create_time, displayUtc ? "full-utc" : 'full') }}
              </div>
            </template>
          </template>
          <!-- 金额 -->
          <template #amount-td="{ row }">
            <TAmount :value="row.bet_amount" :symbol="row.currency?.currency" format="pad-dec" showPositiveSign />
          </template>
          <!-- 倍率 -->
          <template #multiplier-td="{ row }">
            {{ row.odds }}x
          </template>
          <!-- 利润 -->
          <template #profit-td="{ row }">
            <TAmount :value="row.profit_amount" :symbol="row.currency?.currency" format="pad-dec" colored="pos" showPositiveSign />
          </template>
        </TTable>

        <template #pending>
          <TSkeleton v-if="eleBp.lt2xl" class="grid gap-3">
            <div v-for="i of 3" :key="i" class="grid grid-cols-2">
              <TSkeleton type="text" :length="5" />
              <TSkeleton class="row-span-2 ml-auto w-fit self-center" type="text" :length="12" />
              <TSkeleton type="text" :length="12" />
            </div>
          </TSkeleton>
          <TTableLoading v-if="eleBp['2xl']" />
        </template>
      </TSuspenseView>
    </TCard>

    <TPagination
      v-model:page="listParams.page" v-model:pageSize="listParams.page_size" :querier="listQry"
      class="mt-6"
    />
  </div>
</template>

<style class="scss" scoped>
.game-list {
  --uno: 'items-center grid gap-2 grid-rows-2 grid-cols-[2fr_1fr]';

  grid-template-areas:
    'name-div point-div'
    'time-div .';

  &::after {
    position: absolute;
    right: -50%;
    bottom: 0;
    left: -50%;
    box-sizing: border-box;
    pointer-events: none;
    content: ' ';
    border: 1px solid #26272e;
    transform: scale(0.5);
  }
}
</style>
